<!DOCTYPE html>
<html>

<head>
    <style>
        .circular {
            /* 圆形 */
            width: 100px;
            height: 100px;
            background: rgba(0, 225, 255, 0.486);
            border-radius: 50%;
        }

        .oval {
            /* 椭圆 */
            width: 200px;
            height: 100px;
            background: #f00;
            border-radius: 100px / 50px;
        }

        .sector {
            /* 扇形 */
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid #f00;
            border-radius: 50%;
        }

        .ring {
            /* 圆环 */
            width: 100px;
            height: 100px;
            border: 5px solid #f00;
            border-radius: 50%;
        }

        .crescent {
            /* 月牙 */
            width: 100px;
            height: 100px;
            border-radius: 50%;
            box-shadow: 20px 20px 0 0 #f00;
        }

        .crescent2 {
            border-radius: 100%;
            height: 100px;
            width: 100px;
            margin: 200px;
            box-shadow: -1.3em 0.5em 0 0.3em yellow;
        }

        .test6 {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 10px solid #CCCCCC;
            background-color: cornflowerblue;
        }

        .semicircle {
            width: 50px;
            height: 100px;
            border-radius: 50px 0 0 50px;
            background: blue;
        }
    </style>
</head>

<body style="margin-left:30px;margin-top: 100px;">
    <div class="crescent2"></div>
</body>
<script type="text/javascript">
function cal(){
    let dt = new Date();
    let left = new Date();
    let right = new Date();
    left.setHours(23);
    left.setMinutes(30);
    left.setSeconds(0);
    right.setHours(7);
    right.setMinutes(30);
    right.setSeconds(0);

    return dt <= right || dt >= left;
}
</script>
</html>